<template>
  <div class="cart">
    <OrderItem v-for="order in orders" :key="order.orderId" :delOrder="delOrder" :order="order" />
  </div>
</template>

<script>
import { filterOrders } from "@/api/cart.js"
import OrderItem from "./OrderItem.vue"

export default {
  data: () => {
    return {
      orders: []
    }
  },
  async created() {
    if (!this.$store.state.user.isLogin) {
      this.$router.push({ path: "/login" })
    }
    const res = await filterOrders(this.$store.state.user.user.id)
    this.orders = res.data.data
    this.orders.reverse()
  },
  methods: {
    delOrder(orderId) {
      const index = this.orders.findIndex((order) => order.orderId === orderId)
      this.orders.splice(index, 1)
    }
  },
  components: {
    OrderItem
  }
}
</script>

<style lang="scss" scoped>
.cart {
  padding-top: 10px;
  background: rgb(243, 243, 243);
}
</style>
